<template>
  <el-tabs type="border-card" class="edittabform">
    <el-tab-pane label="数据">
      <el-row type="flex" class="editformitem" align="middle">
        <el-col :span="8" class="editlabel">
          <span>数据表格</span>
        </el-col>
        <el-col :span="16" class="editcontent">
          <el-select v-model="obj.tableData.tableId" filterable placeholder="请选择数据" size="mini"
            @change="tableSelectChange">
            <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row type="flex" class="editformitem" align="middle">
        <el-col :span="8" class="editlabel">
          <span>数值</span>
        </el-col>
        <el-col :span="16" class="editcontent">
          <el-select v-model="obj.tableData.lineId" filterable clearable placeholder="请选择数据" size="mini">
            <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <!-- <el-row type="flex" class="editformitem">
      <el-col :span="8" class="editlabel">
        <span>数据查询范围</span>
      </el-col>
      <el-col :span="16" class="editcontent">
        <el-select v-model="obj.tableData.filterTimeType" placeholder="选择列时间范围" size="mini" style="width: 190px">
          <el-option label="15天" :value="15" />
          <el-option label="1天" :value="1" />
          <el-option label="7天" :value="7" />
          <el-option label="30天" :value="30" />
          <el-option label="90天" :value="90" />
          <el-option label="1年" :value="365" />
          <el-option label="全部" :value="99" />
        </el-select>
        <el-tooltip class="item" effect="dark" content="设置数据查询的时间范围，默认查询最近15天" placement="top-start">
          <i class="el-icon-warning formlabletips"></i>
        </el-tooltip>
      </el-col>
    </el-row> -->
      <el-row type="flex" class="editformitem" align="middle">
        <el-col :span="8" class="editlabel">
          <span>小数点位</span>
        </el-col>
        <el-col :span="16" class="editcontent">
          <input v-model.number="obj.tableData.decimal" type="number" class="miniinput" />
        </el-col>
      </el-row>
      <el-row type="flex" class="editformitem" align="middle">
        <el-col :span="8" class="editlabel">
          <span>数值后缀</span>
        </el-col>
        <el-col :span="16" class="editcontent">
          <input v-model="obj.tableData.unit" type="text" style="width: 52px" />
          <input v-model.number="obj.tableData.unitSize" style="width: 40px; margin: 0 10px" type="number" />
          <el-color-picker popper-class="mycolorview" v-model="obj.tableData.unitColor" size="small" show-alpha
            :predefine="predefineColors" @active-change="setColorChange(obj.tableData, 'unitColor', $event)">
          </el-color-picker>
          <div class="fontstylev">
            <div :class="[
              'fontitem',
              { active: obj.tableData.unitFontWeight == 'bold' },
            ]" @click="setFontStyle('fontWeight', obj.tableData, 'unitFontWeight')">
              <i class="iconfont icon-zitijiacu"></i>
            </div>
            <div :class="[
              'fontitem',
              { active: obj.tableData.unitFontStyle == 'italic' },
            ]" @click="setFontStyle('fontStyle', obj.tableData, 'unitFontStyle')">
              <i class="iconfont icon-zitixieti"></i>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" class="editformitem" align="middle">
        <el-col :span="8" class="editlabel">
          <span>显示数值</span>
        </el-col>
        <el-col :span="16" class="editcontent">
          <el-checkbox v-model="obj.tableData.isShowValue"></el-checkbox>
          <span style="margin: 0 15px 0 0">显示状态值</span>
          <el-checkbox v-model="obj.tableData.isShowText"></el-checkbox>
        </el-col>
      </el-row>
      <div class="statitems" v-for="(item, index) in obj.tableData.statusList" :key="'status' + index">
        <el-row type="flex" class="editformitem">
          <el-col :span="8" class="editlabel">
            <span>状态{{ index + 1 }}</span>
          </el-col>
          <el-col :span="16" class="editcontent sldyinput">
            <input v-model="item.value" style="width: 52px" />
            <span style="margin-right: 8px">&nbsp;及以上</span>
            <!-- <el-color-picker popper-class="mycolorview" v-model="item.backgroundColor" size="small" show-alpha
                :predefine="predefineColors"
                @active-change="setColorChange(obj.tableData.statusList[index], 'backgroundColor', $event)" /> -->
          </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
          <el-col :span="8" class="editlabel">
            <span>数值字体</span>
          </el-col>
          <el-col :span="16" class="editcontent sldyinput">
            <input v-model.number="item.valSize" style="width: 104px; margin-right: 8px" type="number" />
            <el-color-picker popper-class="mycolorview" v-model="item.valColor" size="small" show-alpha
              :predefine="predefineColors" @active-change="setColorChange(
                obj.tableData.statusList[index],
                'valColor',
                $event
              )
                ">
            </el-color-picker>
            <div class="fontstylev">
              <div :class="['fontitem', { active: item.valFontWeight == 'bold' }]"
                @click="setFontStyle('fontWeight', item, 'valFontWeight')">
                <i class="iconfont icon-zitijiacu"></i>
              </div>
              <div :class="['fontitem', { active: item.valFontStyle == 'italic' }]"
                @click="setFontStyle('fontStyle', item, 'valFontStyle')">
                <i class="iconfont icon-zitixieti"></i>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" class="editformitem">
          <el-col :span="8" class="editlabel">
            <span>状态值</span>
          </el-col>
          <el-col :span="16" class="editcontent sldyinput">
            <input v-model="item.text" style="width: 52px" />
            <input v-model.number="item.textSize" style="width: 40px; margin: 0 10px" type="number" />
            <el-color-picker popper-class="mycolorview" v-model="item.textColor" size="small" show-alpha
              :predefine="predefineColors" @active-change="setColorChange(
                obj.tableData.statusList[index],
                'textColor',
                $event
              )
                ">
            </el-color-picker>
            <div class="fontstylev">
              <div :class="['fontitem', { active: item.textFontWeight == 'bold' }]"
                @click="setFontStyle('fontWeight', item, 'textFontWeight')">
                <i class="iconfont icon-zitijiacu"></i>
              </div>
              <div :class="['fontitem', { active: item.textFontStyle == 'italic' }]"
                @click="setFontStyle('fontStyle', item, 'textFontStyle')">
                <i class="iconfont icon-zitixieti"></i>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row type="flex" class="editformitem" align="middle">
          <el-col :span="8" class="editlabel">
            <span>背景</span>
          </el-col>
          <el-col :span="16" class="editcontent">
            <el-color-picker popper-class="mycolorview" v-model="item.backgroundColor" size="small" show-alpha
              :predefine="predefineColors" @active-change="setColorChange(
                obj.tableData.statusList[index],
                'backgroundColor',
                $event
              )
                " />
            <select v-model="item.bgType" style="width: 170px; margin-left: 10px">
              <option :value="0">图片</option>
              <option :value="1">图形</option>
            </select>
          </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" v-if="item.bgType == 0">
          <el-col :span="8" class="editlabel">
            <span>背景图片</span>
          </el-col>
          <el-col :span="16" class="editcontent">
            <!-- <el-tooltip class="uploadview" effect="dark" content="上传素材" placement="top-start">
                        <el-upload :action="uploadUrl" :on-success="uploadHandleChange"
                            :data="{ CustomerId: $store.getters.firmId }" :show-file-list="false"
                            accept=".jpg, .png, .gif">
                            <div class="uploadBtn">
                                <i class="el-icon-upload"></i>
                            </div>
                        </el-upload>
                    </el-tooltip>
                    <select style="width: 154px" v-model="item.backgroundImage">
                        <option value>请选择背景图片</option>
                        <option v-for="item in backgroundImgArr" :value="item.url" :key="item.name">
                            {{ item.name }}
                        </option>
                    </select> -->
            <img-store v-model="item.backgroundImage">
              <el-button size="mini" slot="button">请选择背景图片</el-button>
            </img-store>
          </el-col>
        </el-row>
        <template v-if="item.bgType == 1">
          <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
              <span>选择图形</span>
            </el-col>
            <el-col :span="16" class="editcontent">
              <el-select v-model="item.iconGroup" style="width: 212px" filterable placeholder="请选择" size="mini">
                <el-option v-for="item in figureArr" :key="item.id" :label="item.name" :value="item.id" />
                <el-option label="线条" :value="99" />
              </el-select>
            </el-col>
          </el-row>
          <el-row type="flex" class="editformitem">
            <el-col :span="8" class="editlabel">
              <span>图形颜色</span>
            </el-col>
            <el-col :span="16" class="editcontent">
              <el-color-picker v-model="item.iconColor" size="small" show-alpha :predefine="predefineColors"
                popper-class="mycolorview" @active-change="setColorChange(item, 'iconColor', $event)" />
              <el-checkbox v-if="item.iconGroup != 99" v-model="item.isNull" style="padding-left: 15px">是否镂空</el-checkbox>
            </el-col>
          </el-row>
          <!-- 线条属性 -->
          <template v-if="item.iconGroup == 99">
            <el-row type="flex" class="editformitem">
              <el-col :span="8" class="editlabel">
                <span>粗细</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <input v-model.number="item.weight" min="1" class="miniinput" type="number" />
              </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
              <el-col :span="8" class="editlabel">
                <span>旋转</span>
              </el-col>
              <el-col :span="16" class="editcontent">
                <input v-model.number="item.rotate" min="0" max="360" class="miniinput" type="number" />
              </el-col>
            </el-row>
          </template>
        </template>
        <el-row type="flex" class="editformitem" v-if="item.textShadow">
          <el-col :span="8" class="editlabel">
            <span>文字投影</span>
          </el-col>
          <el-col :span="16" class="editcontent">
            <el-tooltip content="水平" placement="top">
              <input v-model="item.textShadow.h" type="number" class="miniinput" style="width:37px;" />
            </el-tooltip>
            <el-tooltip content="垂直" placement="top">
              <input v-model="item.textShadow.v" type="number" class="miniinput" style="width:37px;" />
            </el-tooltip>
            <el-tooltip content="模糊" placement="top">
              <input v-model="item.textShadow.blur" type="number" class="miniinput" style="width:37px;" />
            </el-tooltip>
            <el-color-picker v-model="item.textShadow.color" size="small" show-alpha :predefine="predefineColors"
              popper-class="mycolorview" @active-change="setColorChange(item.textShadow, 'color', $event)" />
          </el-col>
        </el-row>
        <el-row type="flex" class="editformitem" align="middle">
          <el-col :span="8" class="editlabel">
            <span>是否闪烁</span>
          </el-col>
          <el-col :span="16" class="editcontent">
            <el-checkbox v-model="item.isTwinkle"></el-checkbox>
            <template v-if="item.isTwinkle">
              <el-radio v-model="item.twinkleType" :label="0">背景</el-radio>
              <el-radio v-model="item.twinkleType" :label="1">图形</el-radio>
            </template>
          </el-col>
        </el-row>
        <span v-if="index > 0" class="statusdel" @click="deleteDataYinfo(obj.tableData.statusList, index)">×</span>
      </div>
      <div class="addybtn" @click="addStatusStatusinfo(obj.tableData.statusList)" style="margin-right: 0px">
        + 添加状态
      </div>
      <el-row type="flex" class="editformitem" align="middle">
        <el-col :span="8" class="editlabel">
          <span>闪烁频率</span>
        </el-col>
        <el-col :span="16" class="editcontent">
          <input type="number" v-model="obj.tableData.shanTime" style="width: 100px" min="0.5" max="20"
            @change="setNumberMinCheck(0.5, obj.tableData, 'shanTime')" />
          秒
        </el-col>
      </el-row>
      <el-row type="flex" class="editformitem" align="middle">
        <el-col :span="8" class="editlabel">
          <span>刷新间隔</span>
        </el-col>
        <el-col :span="16" class="editcontent">
          <input type="number" v-model.number="obj.tableData.reloadTime" class="miniinput"
            @change="reloadTimeChangeHandle" />
          <span>秒</span>
        </el-col>
      </el-row>
      <title-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"
        :setFontStyle="setFontStyle" :isShowCheckout="false"></title-form>
    </el-tab-pane>
    <el-tab-pane label="事件">
      <event-form :obj="obj" />
    </el-tab-pane>
    <el-tab-pane label="布局">
      <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
// import { query, create } from "@/api/resource";
// import { uploadObject } from "@/utils/upload"
import ImgStore from "@/components/ImgStore";
export default {
  name: "StatusForm",
  props: {
    obj: Object,
    predefineColors: Array,
    dataTableList: Array,
    columnData: Array,
    tableSelectChange: Function,
    deleteDataYinfo: Function,
    setFontStyle: Function,
    setColorChange: Function,
    addStatusStatusinfo: Function,
    reloadTimeChangeHandle: Function,
    // setjustifyContent: Function,
    // setAlignItems: Function,
    // flexstyle: Function,
    // flexstyle2: Function,
    figureArr: Array,
  },
  components: {
    ImgStore,
    BoxForm: () => import('../mixin/BoxForm.vue'),
    TitleForm: () => import('../mixin/TitleForm.vue'),
    EventForm: () => import('../mixin/EventForm.vue'),
  },
  model: {
    prop: "obj",
    event: "change",
  },
  data() {
    return {
      // backgroundImgArr: [],
      // uploadUrl: process.env.VUE_APP_UPLOAD_API,
      // uploadDataform: {},
    };
  },
  created() {
    // this.getImgList();
  },
  methods: {
    // getImgList() {
    //     query({
    //         pageInfo: {
    //             pageSize: 999,
    //             page: 1,
    //             totalCount: 0,
    //         },
    //         orderBy: "createTime",
    //         orderAsc: false,
    //         name: "",
    //         typeInc: [0],
    //     }).then((response) => {
    //         if (response.data.code == 0) {
    //             this.backgroundImgArr = response.data.data.data;
    //         }
    //     })
    // },
    // // 圖片上傳至素材
    // uploadToCos(param) {
    //     uploadObject(param.file, (res) => {
    //         if (res.code == 0) {
    //             this.uploadDataform.id = "";
    //             this.uploadDataform.url = res.filePath;
    //             this.uploadDataform.name = res.fileName;
    //             this.uploadDataform.type = 0;
    //             this.createData();
    //         } else {
    //             this.$message.error(res.message);
    //         }
    //     })
    // },
    // createData() {
    //     const tempDataForm = Object.assign({}, this.uploadDataform);
    //     create(tempDataForm).then((res) => {
    //         if (res.data.code == 0) {
    //             this.$message({
    //                 message: "上传成功",
    //                 type: "success",
    //             });
    //             this.getImgList();
    //         } else {
    //             this.$message.error(res.data.msg);
    //         }
    //     }).catch(() => { });
    // },
  },
};
</script>